<template>
	<view class="app-set">
		<view class="mode flex-box">
			<input  class="box-1" v-model="nickname" type="nickname"  @change="nicknamein"
      placeholder="请输入新昵称"/>
		</view>
		<view class="c-btn" @tap="changeName" >确认</view>
	</view>
</template>

<script>
	import {
		mapState,mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				nickname:'',
				oldname:'',
				is_loading:false
			};
		},
		computed: {
			...mapState(['userInfo'])
		},
		created() {
			this.nickname = this.oldname  = this.userInfo.nickname;
		},
		methods:{
      nicknamein(e){
        this.nickname = e.target.value
      },
			...mapMutations(['update_userinfo']),
			changeName(){
        console.log(this.nickname)
				if(!this.nickname){
					uni.showToast({
						icon:'none',
						title:'请输入新昵称'
					})
					return
				}
				if(this.nickname == this.oldname){
					uni.showToast({
						icon:'none',
						title:'请输入新昵称'
					})
					return
				}
				this.is_loading = true;
				this.$u.api.changeName({nickname:this.nickname})
				.then(res=>{
					uni.showToast({
						icon:'none',
						title:res.msg
					})
					if(res.status){
						this.is_loading = false;
						this.oldname = this.nickname;
						this.userInfo.nickname = this.nickname;
						this.update_userinfo(this.userInfo);
						uni.navigateBack()
					}
				})
				.catch(err=>{
					this.is_loading = false;
					console.log(err);
				})
			}
		}
	}
</script>

<style lang="less">
page{
	background:#fff;
}
.app-set{
	padding:0 30rpx;
	.mode{
		padding:30rpx 0;
		border-bottom:1px solid #EEEEEE;
	}
	.c-btn{
		margin:50rpx auto;
		font-size: 30rpx;
		color: #fff;
		border-radius: 50rpx;
		text-align: center;
		border: 0;
		width: 690rpx;
		// margin: 20px auto;
		line-height:80rpx;
		background: #d0abf4;
	}
}
</style>
